<template>
  <div class="musictext">
    <Header>
      <span slot="middle"
        ><div class="van-ellipsis">{{ title }}</div></span
      >
    </Header>
    <div
        class="beijing"
        :style="{
          backgroundImage: 'url(' + background + ')',
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat',
        }"
      ></div>
    <div class="lrcContainer" @scroll.passive="getScroll($event)">
      <div class="lrc" ref="lrc">
        <p
          class="lrc-p"
          :class="{
            active:
              currentTime > allKeys[index] && currentTime < allKeys[index + 1],
          }"
          v-for="(item, key, index) in lrcData"
          :key="index"
        >
          <span class="up30">{{ item }}{{ scrollLRC(index) }}</span>
        </p>
      </div>
    </div>
    <audio
      :src="audiourl"
      ref="player"
      autoplay
      loop
      controls
      class="audio"
    ></audio>
  </div>
</template>

<script>
import Header from "../../components/NavBar.vue";
import { getTextAPI, getUrlAPI, getSongsDetail } from "../../api/music";
export default {
  data() {
    return {
      audiourl: "",
      lrcData: "",
      lyric: "",
      currentTime: 0,
      allKeys: [],
      background: "",
      title: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取歌曲
    async getmusic(id) {
      const result = await getUrlAPI(id);
      console.log(result);
      if (result.code == 200) {
        this.audiourl = result.data[0].url;
        this.getText(id);
        this.getdetail(id);
      }
    },
    //获取歌词
    async getText(id) {
      const result = await getTextAPI(id);
      console.log("歌词", result);
      this.lyric = result.lrc.lyric;
      this.filterLRC(this.lyric);
    },
    //获取歌曲详情
    async getdetail(id) {
      const result = await getSongsDetail(id);
      console.log(result);
      this.background = result.songs[0].al.picUrl;
      this.title = result.songs[0].name;
    },
    //歌词滚动条
    getScroll(e) {
      //滚动条距离底部的距离
      let scrollBottom =
        e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight;
      console.log(scrollBottom); // 滚动到底部的距离
    },

    filterLRC(values) {
      if (!values) return;
      var lrc = {};
      var lyrics = values.split("\n");
      var reg = /\[\d*:\d*(\.|:)\d*]/g;
      for (var i = 0; i < lyrics.length; i++) {
        var timeRegArr = lyrics[i].match(reg);
        if (!timeRegArr) continue;
        var content = lyrics[i].replace(timeRegArr, "");
        // console.log('content',content)
        var t = timeRegArr[0];
        var min = parseInt(t.match(/\[\d*/i).toString().slice(1));
        var sec = parseInt(t.match(/:\d*/i).toString().slice(1));
        var time = min * 60 + sec;
        lrc[time] = content;
      }
      this.lrcData = lrc;
      this.getAllkeys(lrc);
      console.log(this.lrcData);
    },
    // 获取音乐播放时间
    // 1音乐总时长，音乐正在播放的时间
    addEventHandle() {
      this.$refs.player.addEventListener("timeupdate", this.currentTimeHandle);
    },
    currentTimeHandle() {
      this.currentTime = this.$refs.player.currentTime;
    },
    removeEventHandle() {
      this.$refs.player.removeEventListener(
        "timeupdate",
        this.currentTimeHandle
      );
    },
    getAllkeys(lrcArr) {
      for (var key in lrcArr) {
        this.allKeys.push(key);
      }
      console.log(this.allKeys);
    },
    scrollLRC(index) {
      if (
        this.currentTime > this.allKeys[index] &&
        this.currentTime < this.allKeys[index + 1]
      ) {
        this.$refs.lrc.style.top = -(30 * (index - 2)) + "px";
      }
    },
  },

  created() {
    const id = this.$route.params.id;
    this.getmusic(id);
  },
  mounted() {
    this.addEventHandle();
  },
  components: {
    Header,
  },
  // 组件销毁的时候把监听事件移除
  beforeDestroy() {
    this.removeEventHandle();
  },
};
</script>
<style scoped>
.active {
  color: red;
}
.lrcContainer {
  text-align: center;
  width: 100%;
  height: 100%;
  overflow: scroll;
  position: relative;
  color: rgb(148, 178, 182);
}
.lrc {
  width: 100%;
  position: absolute;
  top: 0;
}
.lrc-p {
  height: 30px;
  line-height: 30px;
}
.up30 {
  margin-top: -30px;
}
.audio {
  position: absolute;
  bottom: 50px;
  width: 100%;
  height: 40px;
}
.beijing {
  position: absolute;
  height: calc(100% - 90px);
  width: 100%;
  filter: blur(3px);
  top: 60px;
  z-index: -99;
}
</style>